<template>
    <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
// import { createRequire } from "module";
// const require = createRequire(import.meta.url);
// console.log(require, "require");

import * as echarts from "echarts";
// require("echarts/theme/macarons"); // echarts theme
import("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

let chart = null
const animationDuration = 3000;

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: "chart",
        },
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "300px",
        },
    },
    data() {
        return {
            // chart: null,
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    beforeDestroy() {
        if (!chart) {
            return;
        }
        chart.dispose();
        chart = null;
    },
    methods: {
        initChart() {
            chart = echarts.init(this.$el, "macarons");
            chart.setOption(
                {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        show: false,
                        type: 'value',
                    },
                    grid: {
                        left: '25%',
                        top: '8%',
                        bottom: "18%"
                    },
                    yAxis: {
                        type: 'category', // 横向需要把yAxis的type设置为category
                        inverse: true, // 反转
                        axisLine: {
                            show: false // 底部横线
                        },
                        axisTick: {
                            show: false // 底部刻度线
                        },
                        axisLabel: {
                            color: "#fff",
                            formatter: (params, index) => {
                                if (index > 3) return [`${params}`] // 只设置前三名
                                return [`{a${index + 1}|No.${index + 1}}    ${params}`].join('\n')
                            },
                            rich: {
                                a1: {
                                    color: "#FFC300",
                                    width: 20, // 序号元素宽
                                    height: 20, // 序号元素高
                                    fontSize: 14
                                },
                                a2: {
                                    color: "#FF8F1F",
                                    width: 20, // 序号元素宽
                                    height: 20, // 序号元素高
                                    fontSize: 14
                                },
                                a3: {
                                    color: "#EE1212",
                                    width: 20, // 序号元素宽
                                    height: 20, // 序号元素高
                                    fontSize: 14
                                },
                            },
                        },
                        data: ['小米', 'oppo', 'vivo', 'apple', 'sungxing'],
                    },
                    series: [
                        {
                            name: '订单',
                            type: 'bar',
                            stack: 'Total',
                            data: [800, 700, 600, 500, 400],
                            barWidth: '40%',
                            label: {
                                show: true,
                                position: 'right',
                                valueAnimation: true,
                                formatter: '{c}',       //标签内容格式器。模板变量有 {a}、{b}、{c}，分别表示系列名，数据名，数据值。
                                color: "#fff",               //文字颜色
                                fontStyle: "normal",         //italic斜体  oblique倾斜
                                fontWeight: "normal",        //文字粗细bold   bolder   lighter  100 | 200 | 300 | 400...
                                fontSize: 12,                  //字体大小
                            },
                        }
                    ]
                }
            );
        },
    },
};
</script>